<template>
    <div class="singer-detail">
        <music-list :loading="loading" :songs="songs" :pic="pic" :title="title"></music-list>
    </div>
</template>

<script>
import {getSingersDetail} from '@/service/singer'
import { processSongs} from '@/service/song'
import musicList from '../components/music-list/music-list.vue'
import storage from 'good-storage'
import { SINGER_KEY } from '@/assets/js/constant'
export default {
    name: 'singer-detail',
        props: {
        singer: Object
    },
    data() {
        return {
            songs: [],
            loading: true
        }
    },
    components: { musicList },
    async created() {
        if (!this.computedSinger) {
            const path = this.$route.matched[0].path
            this.$router.push({
                path
            })
        }
        const result = await getSingersDetail(this.computedSinger)
        const songs = await processSongs(result.songs)
        this.songs = songs
        this.loading = false
    },
    computed: {
        computedSinger() {
            let ret = null
            const singer = this.singer
            if (singer) {
                ret = singer
            } else {
                const cachedSinger = storage.session.get(SINGER_KEY)
                if (cachedSinger && cachedSinger.mid === this.$route.params.id) {
                    ret = cachedSinger
                }
            }
            return ret
        },
        pic() {
            return this.computedSinger && this.computedSinger.pic
        },
        title() {
            return this.computedSinger && this.computedSinger.name
        }
    }

}
</script>

<style lang="scss" scoped>
.singer-detail {
    position: fixed;
    z-index: 10;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: $color-background;
}

</style>